<template>
  <div class="variety">
    <div class="top">
      <Top>
        <span slot="title">菜品</span>
        <i slot="el-icon-edit" class="el-icon-edit"></i>
        <i slot="el-icon-delete" class="el-icon-delete"></i>
        <i slot="el-icon-upload2" class="el-icon-upload2"></i>
        <i slot="el-icon-document-copy" class="el-icon-document-copy"></i>
      </Top>
      <Btn>
        <p slot="btn">
          <el-switch
            v-model="value"
            active-color="#0052d9"
            inactive-color="#b4b5b8"
            active-value="100"
            inactive-value="0"
          >
          </el-switch>
        </p>
      </Btn>
    </div>
    <!-- card -->
    <div>
      <Field v-if="value == 100"></Field>
      <div class="card_item" v-for="item in cardsClose" :key="item.name">
        <Card>
          <i slot="icon" :class="item.icon"></i
          ><el-tooltip
            class="item"
            effect="dark"
            :content="item.title"
            placement="top"
            slot="title"
          >
            <span class="title">{{ item.title }}</span>
          </el-tooltip>
          <span slot="name" class="name">{{ item.name }}</span>
          <span slot="border1" class="border1">{{ item.border1 }}</span>
          <button slot="edit" class="edit">{{ item.edit }}</button>
          <button slot="delect" class="delect">{{ item.delect }}</button>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
import Top from "../components/top.vue";
import Btn from "../components/btn.vue";
import Card from "../components/card.vue";
import Field from "../components/field.vue";
export default {
  name: "variety",
  components: {
    Top,
    Btn,
    Card,
    Field,
  },
  data() {
    return {
      value: "0",
      cardsClose: [
        {
          icon: "el-icon-film",
          title: "菜品分类",
          name: "# fenlei",
          border1: "枚举",
          edit: "编 辑",
          delect: "删 除",
        },
        {
          icon: "el-icon-edit",
          title: "菜品名",
          name: "# name",
          border1: "单行字符串",
          edit: "编 辑",
          delect: "删 除",
        },
        {
          icon: "el-icon-position",
          title: "菜品价格",
          name: "# price",
          border1: "数字",
          edit: "编 辑",
          delect: "删 除",
        },
        {
          icon: "el-icon-s-grid",
          title: "菜品上架状态",
          name: "# status",
          border1: "枚举",
          edit: "编 辑",
          delect: "删 除",
        },
        {
          icon: "el-icon-position",
          title: "销量",
          name: "# sell",
          border1: "数字",
          edit: "编 辑",
          delect: "删 除",
        },
        {
          icon: "el-icon-picture-outline",
          title: "菜品图片",
          name: "# icon",
          border1: "图片",
          edit: "编 辑",
          delect: "删 除",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.variety {
  height: 500px;
  overflow: auto;
}
.card_item:nth-child(odd) i {
  font-size: 30px;
  color: #5f19dd;
}

.card_item:nth-child(even) i {
  font-size: 30px;
  color: #01a4fd;
}
</style>